<div class="page-header">
    <h2>Registration</h2>
</div>

<?php echo form_open('', array('autocomplete' => 'off')); ?>
    <div class="clearfix">
        <label>Email</label>
        <div class="input">
            <input type="text" name="email" />
        </div>
    </div>
    <div class="clearfix">
        <label>Password</label>
        <div class="input">
            <input type="password" name="password" />
            <span class="help-block">Password should be at least six (6) characters.</span>
        </div>
    </div>
    <div class="clearfix">
        <label>Confirm Password</label>
        <div class="input">
            <input type="password" name="password2" />
        </div>
    </div>
    <div class="clearfix">
        <label>First Name</label>
        <div class="input">
            <input type="text" name="firstname" />
        </div>
    </div>
    <div class="clearfix">
        <label>Last Name</label>
        <div class="input">
            <input type="text" name="lastname" />
        </div>
    </div>
    <div class="clearfix">
        <label>Account Name</label>
        <div class="input">
            <input type="text" name="accountname" />
            <span class="help-block">In-game main character</span>
        </div>
    </div>
    <div class="clearfix">
        <label>Forum Name</label>
        <div class="input">
            <input type="text" name="forumname" />
            <span class="help-block">Registered name</span>
        </div>
    </div>
    <div class="actions">
        <button type="submit" class="btn primary submit">Login</button>
    </div>
</form>

<script>
    $('form').submit(function() { return false; });
    
    $('form .submit:not(.clicked)').click(function() {
        var b = $(this);
        var form = b.parents('form');
        
        b.addClass('clicked');
        form.find('.alert-message').remove();
        
        $.ajax({
            type: form.attr('method'),
            url: form.attr('action'),
            data: form.serialize(),
            dataType: 'json',
            success: function(data)
            {
                var div = $('<div />').addClass('alert-message block-message');
                div.append($('<span />').addClass('close').html('&times;'));
                
                if (data.success == true)
                {
                    
                }
                else
                {
                    div.addClass('error');
                    div.append(data.errors);
                    b.removeClass('clicked');
                }
                
                div.hide().prependTo(form).fadeIn();
            }
        });
        
        return false;
    });
</script>